<template>
  <div class="app-container home">

    <div class="tishi_dvi">
      尊敬的用户，您本次登录时间为 <span style="color: #0C71E0">{{loginTime}}</span>，本次已登录 <span style="color: #0C71E0">{{loginTimeTotal}}</span>
    </div>

    <el-row :gutter="10">
      <el-col :span="6">
        <div class="box">
          <ModuleHeader :title="'账号详情'"/>
          <div class="box_div">
            <div class="box_div_child">
              上次登录时间：<span style="color: #666">{{loginTime}}</span>
            </div>
            <div class="box_div_child">
              账号到期时间：<span style="color: #666">{{expirationTime}}</span>
            </div>
            <div class="box_div_child">
              7天登录次数：<span style="color: #666">{{loginCount}}次</span>
            </div>
            <div class="box_div_child">
              方案使用详情：<span style="color: #666">无限制</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box">
          <ModuleHeader :title="'信息总量'"/>
          <div class="box_div">
            <div class="tongji">
              <div class="tongji-count-orange">
                {{todayAlertCount}}
              </div>
              <div class="tongji-text">
                今日预警总数
              </div>
            </div>
            <div class="tongji">
              <div class="tongji-count-orange">
                {{todayNegativeCount}}
              </div>
              <div class="tongji-text">
                今日负面总数
              </div>
            </div>
            <div class="tongji">
              <div class="tongji-count">
                {{todayPublicOpinionCount}}
              </div>
              <div class="tongji-text">
                今日舆情总数
              </div>
            </div>
            <div class="tongji">
              <div class="tongji-count">
                {{sevenDaysPublicOpinionCount}}
              </div>
              <div class="tongji-text">
                近7天舆情总数
              </div>
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="6">
        <div class="box">
          <ModuleHeader :title="'区域分布'"/>
          <div class="box_div">
            <MapChinaChart :height="height"
                           :max="maxOpinionCountChina"
                           :data="chinaOpinions"
            />
          </div>
        </div>

      </el-col>
      <el-col :span="6">
        <div class="box">
          <ModuleHeader :title="'负面信息'"/>
          <div class="box_div">
            <div v-for="(item,index) in negatives" :key="index">
              <div style="  border-bottom: 1px solid #DCDFE6;padding:  5px 0">
                <div style="display: flex;">
                  <div style="margin-right: 10px">
                    <el-avatar :size="20" v-if="item.isnegative === 1" style="background-color: #F56C6C"> 负
                    </el-avatar>
                    <el-avatar :size="20" v-if="item.isneutral === 1" style="background-color: #545454"> 中
                    </el-avatar>
                    <el-avatar :size="20" v-if="item.ispositive === 1" style="background-color: green"> 正
                    </el-avatar>
                  </div>
                  <div class="article-title" @click="GotoDetail(item.id)">
                    {{clearHtml(item.title)}}
                  </div>
                </div>
                <div
                  style="font-size: 12px !important;color: #999;display: flex; justify-content: space-between; align-items: center;">
                  <div>
                    {{item.publishTime}}
                  </div>
                  <div>
                    {{item.siteName}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-col>
    </el-row>


    <div>

      <index-data></index-data>
    </div>


    <el-drawer
      title="舆情预警列表"
      :visible.sync="drawer"
      :direction="direction"
    >

      <div v-for="item in warningList">
        <div style="padding-left: 10px;padding-right: 10px">
          <div
            class="article-title"
            @click="GotoDetail(item.id)"
          >
            <el-tag effect="dark"
                    size="mini" type="danger"
                    v-if="item.level=='red'">
              红色预警
            </el-tag>
            <el-tag effect="dark"
                    size="mini" type="warning"
                    v-if="item.level=='orange'">
              橙色预警
            </el-tag>
            <el-tag color="yellow"
                    effect="light" size="mini"
                    v-if="item.level=='yellow'">
              黄色预警
            </el-tag>

            <span style="font-weight: bold;margin-left: 5px;min-height: 5px;color: green" v-if="item.ispositive===1">[正面]</span>
            <span style="font-weight: bold;margin-left: 5px;min-height: 5px;color: grey"
                  v-if="item.isneutral===1">[中性]</span>
            <span style="font-weight: bold;margin-left: 5px;min-height: 5px;color: red"
                  v-if="item.isnegative===1">[负面]</span>

            {{item.title}}
          </div>

          <div
            class="article-content">
            {{item.content}}
          </div>

          <div style="font-size: 12px;color: #888888;margin-bottom: 10px;text-align: right;margin-top: 5px">
            {{item.siteName}}
            {{item.publishTime}}
          </div>
        </div>
      </div>

      <el-pagination :current-page="pageParams.pageNum"
                     :page-size="10"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     layout="total, sizes, prev, pager, next, jumper"
                     style="text-align: center">
      </el-pagination>


    </el-drawer>

    <div :class="{'download__dialog-wrp': !downloadAppOpen, 'download__dialog-wrp_show': downloadAppOpen}"
         id="download_dialog">
      <div class="download__dialog-mask"></div>
      <div class="download__dialog">
        <div class="download__dialog-close" id="download_dialog_close" @click="closeDialog"></div>
        <div class="download__dialog-hd">下载 Android 版</div>
        <div class="download__btn download__btn_primary" id="android_download_64">
          <div class="download__btn-bd" @click="downloadAndroid64">
            <div class="download__btn-title">下载 64 位安装包</div>
            <div class="download__btn-desc">适合大部分手机设备</div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>

  import {
    queryWarningList,
  } from "@/api/system/opinion";
  import IndexData from '@/views/index/IndexData'
  import {checkPermi, checkRole} from "@/utils/permission"; // 权限判断函数
  import {getVersionUpdateInfo} from "@/api/system/version";
  import {
    getTodayAlertCount,
    getTodayNegativeCount,
    getTodayPublicOpinionCount,
    getPastSevenDaysPublicOpinionCount
  } from "@/api/analysis/statistic";
  import {
    latest,
    loginCountOf7Day
  } from "@/api/monitor/logininfor";
  import {getCTenantByTenantCode} from "@/api/tenant/tenant"
  import {mapGetters} from "vuex";
  import MapChinaChart from '@/components/Echarts/MapChinaChart'
  import {
    getPublicOpinionCountGroupByProvinceOfTenantCode, getNegativeListOfTenantCode
  } from "@/api/analysis/statistic";


  import ModuleHeader from '@/views/components/ModuleHeader'

  export default {
    name: "index",
    components: {
      IndexData,
      MapChinaChart,
      ModuleHeader
    },
    data() {
      return {
        maxOpinionCountChina: 0,
        chinaOpinions: [],
        height: "460px",
        expirationTime: "永久",
        loginCount: 0,
        loginTime: "",
        loginTimeTotal: null,
        pageParams: {
          pageNum: 1,
          pageSize: 8,
        },
        warningList: [],
        drawer: false,
        direction: 'rtl',
        total: 0,
        //使用messageId作为弹窗的key，用来获取弹窗的实例，以对对应弹窗进行操作
        notifications: {},
        downloadAppOpen: false,
        todayAlertCount: 0,
        todayNegativeCount: 0,
        todayPublicOpinionCount: 0,
        sevenDaysPublicOpinionCount: 0,
        negatives: []
      };
    },
    created() {

    },
    computed: {
      ...mapGetters([
        'tenantCode',
      ]),
    },
    mounted() {
      this.getCTenantByTenantCode()
      this.loginCountOf7Day();
      this.getLogininforLatest();
      this.queryWarningList();
      this.getTodayAlertCount();
      this.getTodayNegativeCount();
      this.getTodayPublicOpinionCount();
      this.getPastSevenDaysPublicOpinionCount();
      this.getPublicOpinionCountGroupByProvinceOfTenantCode()
      this.getNegativeListOfTenantCode()
    },
    destroyed() {
      this.closeAllNotification()
    },
    methods: {
      checkPermi,
      checkRole,
      getTodayAlertCount() {
        getTodayAlertCount().then(response => {
          this.todayAlertCount = response.data
        })
      },
      getTodayNegativeCount() {
        getTodayNegativeCount().then(response => {
          this.todayNegativeCount = response.data
        })
      },
      getTodayPublicOpinionCount() {
        getTodayPublicOpinionCount().then(response => {
          this.todayPublicOpinionCount = response.data
        })
      },
      getPastSevenDaysPublicOpinionCount() {
        getPastSevenDaysPublicOpinionCount().then(response => {
          this.sevenDaysPublicOpinionCount = response.data
        })
      },
      handleSizeChange(pageSize) {
        this.pageParams.pageSize = pageSize
      },
      handleCurrentChange(currentPage) {
        this.pageParams.pageNum = currentPage
        this.queryWarningList();
      },
      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      GotoDownLoad() {
        this.downloadAppOpen = true
      },
      closeDialog() {
        this.downloadAppOpen = false
      },
      downloadAndroid64() {
        getVersionUpdateInfo({type: 'ios'}).then(response => {
          let downloadUrl = process.env.VUE_APP_BASE_API + "/profile/" + response.data.downloadUrl;
          window.open(downloadUrl);
        })

      },
      queryWarningList() {
        queryWarningList(this.pageParams, {}).then(response => {
          this.warningList = response.rows
          this.total = response.total;
          if (!this.drawer) {
            this.closeAllNotification();
            let notify = this.$notify({
              title: '平台有' + this.total + '条预警消息',
              message: '点击查看',
              position: 'bottom-right',
              duration: 0,
              type: 'warning',
              onClick: this.showWarningLayout
            });
            this.notifications['message'] = notify;
          }
        })
      },
      showWarningLayout() {
        this.drawer = true;
      },
      //关闭所有通知
      closeAllNotification() {
        let _this = this;
        for (let key in _this.notifications) {
          _this.notifications[key].close();
          delete _this.notifications[key];
        }
      },
      getLogininforLatest() {
        latest().then(response => {
            this.loginTime = response.data.loginTime
            this.getLoginTime(this.loginTime)
          }
        );
      },
      GotoList() {
        this.$router.push({path: '/search/retrieval'});
      },
      getLoginTime(givenTimeString) {
// 解析给定的时间字符串为 Date 对象
        const givenTime = new Date(givenTimeString);

// 获取当前时间
        const currentTime = new Date();

// 计算时间差（毫秒）
        const timeDiff = currentTime - givenTime;

// 将时间差转换为分钟和小时
        const diffInMinutes = Math.floor(timeDiff / (1000 * 60)); // 毫秒转为分钟
        const diffInHours = Math.floor(diffInMinutes / 60); // 分钟转为小时
        const remainingMinutes = diffInMinutes % 60; // 剩余的分钟数

        this.loginTimeTotal = ` ${diffInHours} 小时 ${remainingMinutes} 分钟`
      },
      loginCountOf7Day() {
        loginCountOf7Day().then(response => {
            this.loginCount = response.data
          }
        );
      },
      getCTenantByTenantCode() {
        getCTenantByTenantCode(this.tenantCode).then(response => {
          this.expirationTime = response.data.expirationTime != null ? response.data.expirationTime : "永久"

        })
      },
      getNegativeListOfTenantCode() {
        getNegativeListOfTenantCode({count: 7}).then(response => {
          this.negatives = response.data
        })
      },
      getPublicOpinionCountGroupByProvinceOfTenantCode() {
        getPublicOpinionCountGroupByProvinceOfTenantCode().then(res => {
          //国内舆情
          let mapDatas = res.data
          this.maxOpinionCountChina = 0
          mapDatas.forEach((item) => {
            this.maxOpinionCountChina = item.value > this.maxOpinionCountChina ? item.value : this.maxOpinionCountChina
            let str = item.name;
            if (str.includes("省")) {
              str = str.replace("省", "");
            }
            let obj = {
              name: str,
              value: item.value,
            }
            this.chinaOpinions.push(obj)
          })
        })
      },


    },
  };
</script>

<style scoped lang="scss">


  ::v-deep .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    z-index: 1;
  }


  .article-title {
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    color: #1e1e1e
  }

  .article-content {
    text-indent: 35px;
    font-size: 12px;
    color: #565A5E;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-wrap;
  }

  .download__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    background-color: #fff;
    border-radius: 4px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }

  .download__dialog-hd {
    font-size: 24px;
    line-height: 29px;
    font-weight: 500;
    padding-top: 48px;
    margin-bottom: 40px;
  }

  .download__btn {
    width: 256px;
    height: 70px;
    margin-bottom: 32px;
    background: rgba(0, 0, 0, .05);
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding-left: 24px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    position: relative;
  }

  .download__btn_primary {
    background-color: #07c160;
    color: #fff;
  }

  .download__btn::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Cg fill-rule='evenodd' opacity='.9'%3E %3Cpath d='M21.284 17.391l-4.324 4.323V8.63h-1.92v13.086l-4.324-4.325-1.358 1.357 4.831 4.83a2.54 2.54 0 0 0 1.81.75 2.54 2.54 0 0 0 1.812-.75l4.83-4.83-1.357-1.357z'/%3E %3Cpath d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0m0 1.92c7.763 0 14.08 6.317 14.08 14.08S23.763 30.08 16 30.08 1.92 23.763 1.92 16 8.237 1.92 16 1.92'/%3E %3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Cg fill-rule='evenodd' opacity='.9'%3E %3Cpath d='M21.284 17.391l-4.324 4.323V8.63h-1.92v13.086l-4.324-4.325-1.358 1.357 4.831 4.83a2.54 2.54 0 0 0 1.81.75 2.54 2.54 0 0 0 1.812-.75l4.83-4.83-1.357-1.357z'/%3E %3Cpath d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0m0 1.92c7.763 0 14.08 6.317 14.08 14.08S23.763 30.08 16 30.08 1.92 23.763 1.92 16 8.237 1.92 16 1.92'/%3E %3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
    mask-size: auto;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: currentColor;
    margin-right: 8px;
  }

  .download__dialog-close {
    position: absolute;
    right: 24px;
    top: 24px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M12.25 10.693L6.057 4.5 5 5.557l6.193 6.193L5 17.943 6.057 19l6.193-6.193L18.443 19l1.057-1.057-6.193-6.193L19.5 5.557 18.443 4.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M12.25 10.693L6.057 4.5 5 5.557l6.193 6.193L5 17.943 6.057 19l6.193-6.193L18.443 19l1.057-1.057-6.193-6.193L19.5 5.557 18.443 4.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask-size: auto;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: currentColor;
  }

  .download__dialog-mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    overflow-y: hidden;
  }

  .download__dialog-wrp_show {
    visibility: visible;
    opacity: 1;
  }

  .download__dialog-wrp {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
  }

  .download__btn-desc {
    font-size: 12px;
    line-height: 14px;
  }

  .tongji-text {
    font-size: 13px;
    color: #8590a7;
  }

  .tongji-count-orange {
    font-size: 26px;
    line-height: normal;
    color: #fb7a5e;
  }

  .tongji-count {
    font-size: 26px;
    line-height: normal;
  }

  .tongji {
    flex: 1; /* 这会让每个子 div 平分父 div 的高度 */
    text-align: center;
  }

  .tishi_dvi {
    font-size: 14px;
    padding: 15px;
    align-items: center;
    margin-bottom: 10px;
    color: #000;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(136, 157, 175, .1);
  }

  .box{
    background-color: white;
    margin-bottom: 10px;
  }

  .box_div {
    height: 380px;
    padding: 20px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }

  .box_div_child {
    display: flex;
    align-items: center;
    flex: 1; /* 这会让每个子 div 平分父 div 的高度 */
  }
</style>

